<template>
  <div class="basic-info-wrapper">
    <el-dialog
      v-model="dialogVisible"
      title="修改头像"
      :width="dialogWidth"
      destroy-on-close
    >
      <Avatar @uploadSuccess="dialogVisible=false"/>
    </el-dialog>
    <el-row>
      <el-col>
        <div class="title">基本信息</div>
        <el-divider />
      </el-col>
    </el-row>
    <el-row :gutter="15" class="row">
      <el-col :lg="6">
        <div class="left">
          <div class="avatar-wrapper flex-center">
            <div>
              <el-avatar :src="avatar" class="avatar">
                <img :src="defaultAvatar" alt="avatar"/>
              </el-avatar>
              <div class="flex-center">
                <el-button class="modify" @click="dialogVisible=true">
                  <div class="flex-center">
                    <el-icon class="icon"><camera /></el-icon>
                    修改头像
                  </div>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :lg="18">
        <div class="right">
          <el-form
            label-position="right"
            :model="basicInfo"
            size="medium"
            label-width="70px"
          >
            <el-form-item label="用户ID">
              <el-input v-model="username" disabled></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="basicInfo.nickname"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名">
              <el-input v-model="basicInfo.real_name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="basicInfo.gender" placeholder="请选择性别" style="width: 100%">
                <el-option label="未知" :value="0"></el-option>
                <el-option label="男" :value="1"></el-option>
                <el-option label="女" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="basicInfo.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="updateBasicInfo()">
                更新基本信息
              </el-button>
            </el-form-item>
          </el-form>
<!--          nickname: [{{nickname}}]-->
<!--          real_name: [{{real_name}}]-->
<!--          gender: [{{gender}}]-->
<!--          email: [{{email}}]-->
<!--          <div>-->
<!--            nickname: [{{basicInfo.nickname}}]-->
<!--            real_name: [{{basicInfo.real_name}}]-->
<!--            gender: [{{basicInfo.gender}}]-->
<!--            email: [{{basicInfo.email}}]-->
<!--          </div>-->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "BasicInfo"
}
</script>

<script setup>
import {ref, reactive, computed, watchEffect} from 'vue'
import {useStore} from 'vuex'
import {ElMessage} from 'element-plus'
import Avatar from './Avatar'
import defaultAvatar from '@/assets/defaultAvatar.png'

const basicInfo = reactive({
  id: '',
  nickname: '',
  real_name: '',
  gender: '',
  email: '',
})
const store = useStore()
const id = computed(() => store.state.user.id)
const username = computed(() => store.state.user.username)
const nickname = computed(() => store.state.user.nickname)
const real_name = computed(() => store.state.user.real_name)
const gender = computed(() => store.state.user.gender)
const email = computed(() => store.state.user.email)
const avatar = computed(() => store.state.user.avatar)

watchEffect(() => {
  basicInfo.id = id.value
  basicInfo.nickname = nickname.value
  basicInfo.real_name = real_name.value
  basicInfo.gender = gender.value
  basicInfo.email = email.value
})

let loading = ref(false)
const updateBasicInfo = async () => {
  loading.value = true
  try{
    await store.dispatch('user/setUserInfo', basicInfo)
    ElMessage({
      type: 'success',
      message: '信息更新成功！',
      center: true,
      duration: 2000
    })
  } catch (e) {
    const message = typeof e === 'string' ? e : e.message
    ElMessage({
      type: 'error',
      message: '信息更新失败，请重试！',
      center: true,
      duration: 2000
    })
  } finally {
    loading.value = false
  }
}

const dialogVisible = ref(false)
const isDesktop = computed(() => store.state.app.device === 'desktop')
const dialogWidth = computed(() => isDesktop.value? '60%': '90%')
</script>

<style lang="sass">
.basic-info-wrapper
  label
    font-weight: 700
</style>

<style scoped lang="sass">
.basic-info-wrapper
  height: 100%
  width: 100%
  .title
    color: #515a6e
    font-size: 1.5em
    font-weight: bold
  .row
    height: 100%
  .left
    .avatar-wrapper
      margin-top: 30px
      .avatar
        height: 150px
        width: 150px
      .modify
        margin: 20px 0
        .icon
          margin-right: 5px
  //background-color: #67c23a
  .right
    //background-color: #ffd04b
</style>
